<template>
    <view class="content-area">
        <view class="container">
            <!-- 语言选择区域 -->
            <view class="language-selector">
                <view class="source-lang">
                    <picker :value="sourceLangIndex" :range="languages" @change="changeSourceLang">
                        <view class="picker">
                            <text>{{ languages[sourceLangIndex] }}</text>
                            <text class="arrow">▼</text>
                        </view>
                    </picker>
                </view>
                <view class="switch-btn" @tap="switchLanguages">
                    <text class="iconfont">⇄</text>
                </view>
                <view class="target-lang">
                    <picker :value="targetLangIndex" :range="languages" @change="changeTargetLang">
                        <view class="picker">
                            <text>{{ languages[targetLangIndex] }}</text>
                            <text class="arrow">▼</text>
                        </view>
                    </picker>
                </view>
            </view>

            <!-- 视频上传区域 -->
            <view class="video-area">
                <view class="video-preview" v-if="videoUrl">
                    <video :src="videoUrl" controls></video>
                </view>
                <view class="upload-btn" v-else @tap="chooseVideo">
                    <text class="iconfont">📹</text>
                    <text class="upload-text">点击选择视频</text>
                </view>
            </view>

            <!-- 字幕区域 -->
            <view class="subtitle-area" v-if="subtitles.length > 0">
                <view class="subtitle-header">
                    <text class="subtitle-title">字幕翻译</text>
                </view>
                <scroll-view class="subtitle-list" scroll-y>
                    <view class="subtitle-item" v-for="(item, index) in subtitles" :key="index">
                        <view class="time-code">{{ item.time }}</view>
                        <view class="subtitle-text">{{ item.text }}</view>
                        <view class="translated-text">{{ item.translation }}</view>
                    </view>
                </scroll-view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons" v-if="videoUrl">
                <button class="action-btn" @tap="startTranslate">开始翻译</button>
                <button class="action-btn outline" @tap="resetVideo">重新选择</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            languages: ['中文', '英语', '日语', '韩语', '法语', '德语', '西班牙语', '俄语'],
            sourceLangIndex: 1,  // 默认英语
            targetLangIndex: 0,  // 默认中文
            videoUrl: '',
            subtitles: [],
            isTranslating: false
        }
    },
    methods: {
        changeSourceLang(e) {
            this.sourceLangIndex = e.detail.value;
        },
        changeTargetLang(e) {
            this.targetLangIndex = e.detail.value;
        },
        switchLanguages() {
            const temp = this.sourceLangIndex;
            this.sourceLangIndex = this.targetLangIndex;
            this.targetLangIndex = temp;
        },
        chooseVideo() {
            uni.chooseVideo({
                count: 1,
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.videoUrl = res.tempFilePath;
                    // 清空之前的字幕
                    this.subtitles = [];
                }
            });
        },
        startTranslate() {
            if (this.isTranslating) return;
            
            this.isTranslating = true;
            uni.showLoading({
                title: '正在处理...'
            });

            // 模拟字幕提取和翻译过程
            setTimeout(() => {
                this.subtitles = [
                    {
                        time: '00:00:01',
                        text: 'Hello, welcome to our video.',
                        translation: '你好，欢迎观看我们的视频。'
                    },
                    {
                        time: '00:00:05',
                        text: 'Today we will talk about translation.',
                        translation: '今天我们将讨论翻译。'
                    },
                    {
                        time: '00:00:10',
                        text: 'This is a demo of video translation.',
                        translation: '这是视频翻译的演示。'
                    }
                ];

                this.isTranslating = false;
                uni.hideLoading();
                uni.showToast({
                    title: '翻译完成',
                    icon: 'success'
                });
            }, 2000);
        },
        resetVideo() {
            this.videoUrl = '';
            this.subtitles = [];
        }
    }
}
</script>

<style>
.content-area {
    min-height: 100vh;
    background-color: #f8f9fa;
}

.container {
    padding: 20rpx;
}

.language-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
}

.source-lang,
.target-lang {
    flex: 1;
}

.picker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    font-size: 24rpx;
    margin-left: 10rpx;
    color: #666;
}

.switch-btn {
    padding: 0 30rpx;
    font-size: 40rpx;
    color: #0d6efd;
}

.video-area {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.video-preview {
    width: 100%;
    height: 400rpx;
}

.video-preview video {
    width: 100%;
    height: 100%;
}

.upload-btn {
    height: 400rpx;
    border: 2rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-btn .iconfont {
    font-size: 80rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.upload-text {
    font-size: 28rpx;
    color: #666;
}

.subtitle-area {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
}

.subtitle-header {
    padding: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.subtitle-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.subtitle-list {
    max-height: 600rpx;
}

.subtitle-item {
    padding: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.time-code {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.subtitle-text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
}

.translated-text {
    font-size: 28rpx;
    color: #0d6efd;
}

.action-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
}

.action-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 32rpx;
}

.action-btn {
    background-color: #0d6efd;
    color: #fff;
}

.action-btn.outline {
    background-color: transparent;
    border: 2rpx solid #0d6efd;
    color: #0d6efd;
}
</style> 